<template>
  <div>
    <div class="userTop">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <div class="blankBox">
        <div class="insideBox">
          <div class="imgBorder">
            <img
              src="http://liufusong.top:8080/img/profile/avatar.png"
              alt=""
            />
          </div>
          <p>游客</p>
          <van-button type="primary" size="normal">普通按钮</van-button>
        </div>
      </div>
    </div>
    <div class="user-list">
      <ul>
        <li><img src="../../assets/userIconfont/collect.png" alt=""> <p>我的收藏</p></li>
        <li><img src="../../assets/userIconfont/rent.png" alt=""> <p>我的出租</p></li>
        <li><img src="../../assets/userIconfont/record.png" alt=""> <p>看房记录</p></li>
        <li><img src="../../assets/userIconfont/homeowner.png" alt=""> <p>成为房主</p></li>
        <li><img src="../../assets/userIconfont/data.png" alt=""> <p>个人资料</p></li>
        <li><img src="../../assets/userIconfont/contact.png" alt=""> <p>联系我们</p></li>
      </ul>
    </div>
    <div class="bottomPic">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindHomeHome',

  data () {
    return {}
  },

  mounted () {},

  methods: {}
}
</script>

<style lang="less" scoped>
.userTop {
  position: relative;
  height: 300px;
  img {
    width: 100%;
  }
  .blankBox {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
    width: 85%;
    height: 55%;
    box-shadow: 0 0 10px 3px #ddd;
    text-align: center;
    background-color: #fff;
    .insideBox {
      .imgBorder {
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
.user-list {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      text-align: center;
      width: 33.3%;
      padding: 15px 0;
      img{
        width: 20px;
        height: 20px;
      }
      p {
        font-size: 13px;
        color:#333;
      }
    }
  }
}
.bottomPic {
  text-align: center;
  img {
    width: 92%;
    margin-top: 10px;
  }
}
</style>
